<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <canvas id="canvas" style="border: 1px solid #aaa; display: block; margin: 50px auto;">
        当前浏览器不支持Canvas，请更换浏览器
    </canvas>
    <script>
        window.onload = function () {
            var canvas = document.getElementById("canvas");

            canvas.width = 800;
            canvas.height = 800;

            var context = canvas.getContext("2d");

            var backCanvas = createBackgroundCanvas();
            var pattern = context.createPattern(backCanvas, 'repeat');
            context.fillStyle = pattern;
            context.fillRect(0, 0, 800, 800);
        }

        function createBackgroundCanvas() {
            var backCanvas = document.createElement('canvas');
            backCanvas.width = 100;
            backCanvas.height = 100;
            var backCanvasContext = backCanvas.getContext('2d');
            drawStar(backCanvasContext, 50, 50, 1, 0);
            return backCanvas;
        }

        function drawStar(cxt, x, y, r, rot) {

            cxt.save();
            cxt.translate(x, y);
            cxt.rotate(rot / 180 * Math.PI);
            cxt.scale(r, r);

            startPath(cxt);

            cxt.fillStyle = '#fb3';

            cxt.fill();
            cxt.restore();
        }

        function startPath(cxt) {
            cxt.beginPath();
            for (var i = 0; i < 5; i++){
                cxt.lineTo(Math.cos((18 + i*72)/180*Math.PI) * 20, -Math.sin((18 + i*72)/180*Math.PI) * 20);
                cxt.lineTo(Math.cos((54 + i*72)/180*Math.PI) * 0.5 * 20, -Math.sin((54 + i*72)/180*Math.PI) * 0.5 * 20);
            }
            cxt.closePath();
        }
    </script>
</body>
</html>